/**
 * 学习目标：掌握样式处理
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 2. 👍外部样式
// 2.1 新建css文件
// 2.2 导入样式文件
import './base.css';

const divNode = (
  <div>
    <div
      // 1. 👎行内样式 - 不推荐写太多，会导致JSX臃肿
      // 语法： style={css对象}
      style={{
        color: 'red',
        // 属性名👍： 驼峰属性命名名
        // 🔔当单位为px时， 可以省略为数字
        fontSize: 100,

        // 属性名 👎 'font-size': '100px'
      }}
    >
      hello React
    </div>
    {/* 2.3 分配类名 */}
    <div className="box">xxx</div>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
